@mixin activeStyle() {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 0 4px 4px 0;
}

.builder-sidebar {
  display: flex;
  flex-direction: column;
  width: 60px;
  height: 100%;
  .mat-divider {
    width: 100%;
  }
  .menu,
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .logo {
    display: flex;
    padding: 10px;
    justify-content: center;
    height: 55px;
    flex: 0 0 55px;
    box-sizing: border-box;
    ::ng-deep {
      img {
        max-height: 30px;
        object-fit: contain;
      }
    }
  }
  .accordion-menu,
  .icon-menu {
    justify-content: start;
    flex: 1 1 auto;
    margin: 10px 0;
    overflow: auto;
  }
  .icon-menu {
    .item {
      position: relative;
      padding: 16px 0;
      width: 100%;
      height: 56px;
      box-sizing: border-box;
      text-align: center;
      .custom-icon {
        position: relative;
        z-index: 1;
      }
      &.active,
      &:hover,
      &:focus {
        .custom-icon {
          &::after {
            content: '';
            position: absolute;
            z-index: -1;
            left: 50%;
            top: 50%;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            border-radius: 10px;
          }
        }
      }
      &:hover {
        cursor: pointer;
        > .child {
          display: flex;
        }
      }
      .child {
        display: none;
        text-align: left;
        position: fixed;
        margin-left: 60px;
        width: 246px;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 999;
        padding: 4px 0;
        flex-direction: column;
        line-height: 1.5;
        cursor: default;
        .hover-menu {
          position: relative;
          box-shadow: none;
          display: block;
          height: 100%;
          overflow: auto;
          .title {
            overflow: hidden;
            line-height: 56px;
            height: 56px;
            border-radius: 0;
            font-weight: 500;
            font-size: 24px;
            padding: 0 30px;
          }
          .child-menu {
            display: flex;
            flex-direction: column;

            ::ng-deep {
              .mdc-list-item {
                position: relative;
                cursor: pointer;
                padding-left: 30px;
                padding-right: 30px;
                height: 56px;

                .mat-icon {
                  height: inherit;
                  width: inherit;
                }
                .mdc-list-item__primary-text {
                  display: flex;
                  align-items: center;
                  gap: 6px;
                }
                &.active,
                &:hover {
                  &::after {
                    content: '';
                    position: absolute;
                    height: 96%;
                    width: calc(100% - 20px);
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 0;
                    border-radius: 6px;
                  }
                }

                &:not(.mdc-list-item--selected):focus {
                  &::before {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .accordion-menu {
    flex: 0 1 100%;
    ::ng-deep {
      mat-panel-title {
        font-size: 17px;
        align-items: center;
      }
      > .mat-accordion {
        > .mat-mdc-list {
          &.no-child {
            .mdc-list-item__content {
              margin-left: 0;
              padding: 0;
              font-weight: 500;
              .mdc-list-item__primary-text {
                font-weight: 500;
              }
            }
            &.active {
              &::after {
                @include activeStyle();
              }
            }
          }
          .mat-mdc-list-item {
            &::after {
              display: none;
            }
          }
        }
      }
      .mat-accordion {
        .mat-expansion-panel {
          border-radius: 0;
          .mat-expansion-panel-header {
            border-bottom: 0;
            height: 56px;
            .mat-content {
              font-size: 17px;
              align-items: center;
            }
          }
          &.active {
            .mat-expansion-panel-header {
              &::after {
                @include activeStyle();
              }
            }
          }
        }
      }
      .mat-icon {
        line-height: 1;
      }

      .mat-mdc-list {
        position: relative;
        border-bottom: none !important;
        padding: 0;
        overflow: hidden;
        .mat-mdc-list-item {
          overflow: visible;
          height: 56px;
          &:hover {
            &::after {
              content: '';
              position: absolute;
              height: 96%;
              width: 100%;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 0;
              border-radius: 6px;
            }
          }
          &.mdc-list-item--with-leading-icon {
            padding-left: 16px;
            .mat-mdc-list-item-icon {
              margin-left: 0;
            }
            .mdc-list-item__content {
              margin-left: 0;
            }
          }
        }
        .mdc-list-item__content {
          position: relative;
          z-index: 10;
          padding-top: 4px;
          padding-bottom: 4px;
          margin-left: 18px;
        }
      }
    }
  }

  .bottom {
    .toggle {
      cursor: pointer;
      display: flex;
      .wrapper {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        ::ng-deep {
          .custom-icon {
            align-items: center;
          }
          .mat-icon {
            border-radius: 50%;
            width: 30px !important;
            height: 30px !important;
            display: inherit;
          }
          .text {
            margin-left: 10px;
            font-size: small;
          }
        }
      }
    }
  }

  &.opened {
    width: 200px;
  }
}
